<link href="/js/ueedit/themes/default/css/umeditor.css" type="text/css" rel="stylesheet">
<script type="text/javascript">
    var $oss_url_path = "<?php echo $this->oss_url_path; ?>";
    var $oss_dir = "<?php echo $this->oss_dir; ?>";

    var $allowed_image_type = "<?php echo implode($this->allowed_image_type,','); ?>";
    var $allowed_video_type = "<?php echo implode($this->allowed_video_type,','); ?>";
    var $allowed_audio_type = "<?php echo implode($this->allowed_audio_type,','); ?>";

    var $allowed_image_size = "<?php echo $this->allowed_image_size;?>";
    var $allowed_video_size = "<?php echo $this->allowed_video_size;?>";
    var $allowed_audio_size = "<?php echo $this->allowed_audio_size;?>";
    var $article_id = "<?php echo $this->id?>";
</script>
<div class="login-bg">
    <header class="demo-header">
        <div class="title3Left flt text-center header-small">
            <a href="javascript:history.back(-1);" class="whiteC">
                <img src="/img/back.png" class="backimg">返回
            </a>
        </div>
        <div class="title3Middle flt text-center">我要发布</div>
        <div class="title3Right flt text-center header-small" id="bianji"></div>
    </header>
    <div class="content data-padding div-center posre" style="width: 90%;">
        <div class="addicon login-bottom">
            <a href="/article/preview?id=<?php echo $this->info->id?>" class="disn">
                <img src="/img/yulanicon.png"/>
            </a>
            <img src="/img/jiaicon.png" onclick="closeAdd()" class="img-padding1" style="padding-left: 7%;"/>
            <a id="article_publist" class="disn">
                <img src="/img/fabuicon.png"/>
            </a>
        </div>
        <div class="addtype login-bottom disn">
            <input type="radio" name="myradio" value="random_name" checked hidden/> <!--随机生成文件名称，支持多次重复上传-->
            <div>
                <img src="/img/addfont.png" class="addfont"/>
            </div>
            <div class="addImg uploadImg disi" id="container-img">
                <a id="select-img" href="javascript:void(0);" class='btn'><img src="/img/addimg.png" class="addimg"/></a>
                <a id="post-img" href="javascript:void(0);" class='btn'></a>
            </div>
            <div>
                <a href="/product?article_id=<?php echo $this->id?>"><img src="/img/addproduct.png"/></a>
            </div>
            <div class="addImg uploadImg disi"  id="container-video">
                <!--<label class="weilabel"><input type="file" accept="video/*" capture="camcorder"><img
                            src="/img/addvedio.png"/></label>-->
                <a id="select-video" href="javascript:void(0);" class='btn'><img src="/img/addvedio.png"/></a>
                <a id="post-video" href="javascript:void(0);" class='btn'></a>
            </div>
            <div class="addImg uploadImg disi"  id="container-audio">
                <!--                <label class="weilabel"><input type="file" accept="audio/*" capture="microphone"><img-->
                <!--                            src="/img/addaudio.png"/></label>-->
                <a id="select-audio" href="javascript:void(0);" class='btn'><img src="/img/addaudio.png"/></a>
                <a id="post-audio" href="javascript:void(0);" class='btn'></a>
            </div>
            <br/>
            <img src="/img/addcloseicon.png" class="typeimg-last" onclick="closeAdd()"/>
        </div>
        <form id="publishForm" action="/article/publish" method="post">
            <input type="hidden" name="id" value="<?php echo $this->info->id ?>">
        </form>
        <?php
        if(isset($this->info->content)){
            foreach ($this->info->content as $content)  {
                switch ($content->type){
                    case \Orm\ArticleContent\ArticleContentClass::TYPE_TEXT:
                        echo '<div class="margin-adjust article-text posre" id="item['.$content->id .']" item_id='.$content->id .'>
                                    <div class="img-width fontbianji font_text" contenteditable="false" style="min-height:42px;border:1px solid gray">
                                        '.$content->content.' 
                                    </div>
                                    <div class="publish-bianji">
                                        <div class="four1 four edit_font"><img src="/img/fontup.png" class="img-middle img-padding1" style="width: 13px;"/>文字</div>
                                        <div class="flt bianji-bar"></div><div class="four2 four publishDel" onclick=""><img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除</div>
                                    </div>
                                </div>';
                        break;
                    case \Orm\ArticleContent\ArticleContentClass::TYPE_VIDEO:
                        echo '<div class="posre img-width"  id="item['.$content->id .']" item_id='.$content->id .'>
                            <img src="/img/playicon.png" class="playicon"/>
                            <video class="img-width my_video_1 pause" preload="auto" data-setup="{}">
                                <source src="'.$content->content.'" type="audio/mp4">
                            </video>
                            <div class="publish-bianji">
                                <div class="four1 four" onclick=""><div class="addImg uploadImg"><a href="javascript:void(0);" class="btn" style="color:white"><img src="/img/videoup.png" class="img-middle img-padding1" style="width: 16px;"/>视频</a>
                                <a  href="javascript:void(0);" class="btn"></a></div></div><div class="flt bianji-bar"></div><div class="four2 four publishDel"><img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除</div>                        
                            </div>
                        </div>';
                        break;
                    case \Orm\ArticleContent\ArticleContentClass::TYPE_AUDIO:
                        echo '<div class="posre" id="item['.$content->id .']  item_id='.$content->id .'">
                                <audio controls="controls" class="img-width"><source src="'.$content->content.'" type="audio/mpeg"></audio>
                                <div class="publish-bianji">
						            <div class="four1 four" onclick="">
						                <div class="addImg uploadImg"><a href="javascript:void(0);" class="btn" style="color:white"><img src="/img/audioup.png" class="img-middle img-padding1" style="width: 16px;"/>音频</a><a href="javascript:void(0);" class="btn"></a></div>
						            </div>
						            <div class="flt bianji-bar"></div>
						            <div class="four2 four publishDel"><img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除</div>
						        </div>
						    </div>';
                        break;
                    case \Orm\ArticleContent\ArticleContentClass::TYPE_IMG:
                        echo '<div class="posre" id="item['.$content->id .']"  item_id='.$content->id .'>
                                <img class="img-width" src="'.$content->content.'" id="imgbianji"/>
                                <div class="publish-bianji">
                                    <div class="four1 four" onclick=""><div class="addImg uploadImg"><a href="javascript:void(0);" class="btn" style="color:white"><img src="/img/imgup.png" class="img-middle img-padding1" style="width: 16px;"/>图片</a>
                                    <a href="javascript:void(0);" class="btn"></a></div></div><div class="flt bianji-bar"></div><div class="four2 four publishDel"><img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除</div>                        
                                </div>
                            </div>';
                        break;
                    case \Orm\ArticleContent\ArticleContentClass::TYPE_PRODUCT:
                        if (isset($content->product_info->image_list)){
                            $img_src_str = '';
                            if (isset($content->product_info->image_list)) {
                                $img_src_str = '
                                    <div class="swiper-container">
	                                        <div class="swiper-wrapper">';
                                foreach ($content->product_info->image_list as $img) {
                                    $img_src_str .= '
                                                <div class="swiper-slide"><img src="' . $img->url . '" class="img-width"/></div>';
                                }
                                $img_src_str .= '    
                                            </div>
                                            <!-- 如果需要分页器 -->
                                            <div class="swiper-pagination"></div>
                                        </div>';
                            }
                            echo '<div class="posre margin-adjust" id="item['.$content->id .']" item_id='.$content->id .'>
                                <div class="padding-top1" style="padding-bottom: 30px;">
                                    '.$img_src_str.'
                                    <div  style="width: 95%;" class="div-center padding-adjust3">
                                        <div class="img-width">商品名称：'.$content->product_info->name.'</div>
                                        <div class="img-width">商品描述：'.$content->product_info->describe.'</div>
                                        <div class="flt pline" style="width: 20%;padding:10px 0 0;">
                                            <p><strong>￥'.$content->product_info->unit_price.'</strong></p>
                                        </div>
                                        <div class="flt text-right padding-top1" style="width: 80%;">
                                            <div class="inputNum" style="margin-bottom:5px;">
                                                <img src="/img/refund_jian.png" class="minus minadd" onclick="javascript:minus(this);return false;"/>
                                                <span class="proNum" pid="" eid="" cid="">
                                                    <input type="text" name="product['.$content->product_info->id.']" productId="" value="1" onblur="javascript:checkIntcart(this);return false;">
                                                </span>
                                                <img src="/img/refund_jia.png" class="add minadd" onclick="javascript:addCart(this);return false;"/>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="publish-bianji">
                                    <div class="four1 four" onclick=""><div class="addImg uploadImg"><a href="/product/edit?id='.$content->product_info->id.'" class="btn" style="color:white"><img src="/img/proup.png" class="img-middle img-padding1" style="width: 16px;"/>产品</a>
                                    <a href="javascript:void(0);" class="btn"></a></div></div><div class="flt bianji-bar"></div><div class="four2 four publishDel"><img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除</div>                        
                                </div>
                            </div>';
                        }
                        break;
                }
            }
        }
        ?>
    </div>
    <div id="ossfile" hidden>你的浏览器不支持flash,Silverlight或者HTML5！</div>
    <div class="form" id="guige">
	    <form action="#" class="form-horizontal">
	        <textarea id="content" name="content" class="mbtn"></textarea>
	    </form>
	    <div class="product font-editbutton" style="">
            <div class="flt" style="color: #5190FF;margin-right: 13px;" onclick="closeEditorDiv();">取消</div>
            <div class="flt Corange" onclick="submitFont();">确定</div>
        </div>
	</div>
	<div id="fade" class="black_overlay" style="bottom: 0;top: auto;" onclick="closeEditorDiv()"></div>
	<script type="text/javascript" charset="utf-8" src="/js/ueedit/umeditor.config.js"></script>
	<script type="text/javascript" charset="utf-8" src="/js/ueedit/umeditor.min.js"></script>
    <script type="text/javascript" src="/js/plupload.full.min.js"></script>
    <script type="text/javascript" src="/js/oss-web-upload.js"></script>
    <script type="text/javascript">
	    $(document).ready(function() {
	        // 编辑器初始化
	        UM.getEditor('content');
	        $(".edui-container").css("z-index","");

	        // 素材上传 ios 特殊处理
            var u = navigator.userAgent;
            var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
            if (isiOS) {
                iosInit();
            }
	    });

	    /*
         * 素材上传 ios 特殊处理
         */
	    function iosInit() {
            $('#select-img').live('click',function () {
                var file_ele = $('#container-img').find('input[type="file"]');
//            file_ele.attr('accept','image/*'); // 加入之后选择文件的框弹出较慢
                file_ele.click();
            });
             $('#select-video').live('click',function () {
             var file_ele = $('#container-video').find('input[type="file"]');
             //            file_ele.attr('accept','video/*'); // 加入之后选择文件的框弹出较慢
             file_ele.click();

             });
             $('#select-audio').live('click',function () {
             var file_ele = $('#container-audio').find('input[type="file"]');
             //            file_ele.attr('accept','audio/*'); // 加入之后选择文件的框弹出较慢
             file_ele.click();
             });
        }

        /**
         * 点击添加文字
         * */
        $(".addfont").live('click',function () {
            // 1新增类目插入数据库
            var url = '/article/add-content';
            $.post(url,{'article_id':$article_id,'content':'','type':'text','sort':0},function (res) {
                if(res.code != 200) {
                    alert(res.massage);
                } else {
                    // 2页面添加元素
                    var font_text = '' +
                        '<div class="margin-adjust article-text posre"  id="item['+res.result.id+']" item_id="'+res.result.id+'">' +
                        '   <div class="img-width fontbianji font_text" contenteditable="false" style="min-height:42px;border:1px solid gray"></div>' +
                        '   <div class="publish-bianji">' +
                        '       <div class="four1 four edit_font ">' +
                        '           <img src="/img/fontup.png" class="img-middle img-padding1" style="width: 13px;"/>文字</div>' +
                        '       <div class="flt bianji-bar"></div>' +
                        '       <div class="four2 four publishDel" onclick="">' +
                        '           <img src="/img/delete.png" class="img-sub img-padding1" style="width: 13px;"/>删除' +
                        '       </div>' +
                        '   </div>' +
                        '</div>';
                    $(".content").append(font_text);
                }
            },'json');
        });
        /**
         * 删除元素
         */
        $('.posre .publishDel').live('click',function(){
            var posre_ele = $(this).parent().parent()
            var item_id = posre_ele.attr('item_id');
            if (item_id == false ) { return alert('对不起，请选择你要删除的文章内容');}
            var url = '/article/delete-content';
            $.post(url,{'id':item_id},function (res) {
                if (res.code == 200) {
                    posre_ele.remove();
                } else {
                    alert('对不起，删除失败')
                }
            },'json');
        })

        /**
         * 背景图片隐藏
         * */
        $(".content").bind('DOMNodeInserted', function (e) {
            var posre_len = $('.content').find('.posre').length;
            if (posre_len > 0) {
                closeAdd();
                $('.addicon>a').removeClass('disn');
                $('.login-bg').css({"background":"none"});
                $('.addtype').css("bottom","0")
            }
            //var lastElement=$('.content .productlast').last();
        })

        /**
         * 视频播放
         */
        $('video').live('click',function() {
            if ($(this).hasClass('pause')) {
                $("video").trigger("play");
                $(this).removeClass('pause');
                $(this).addClass('play');
                $(this).siblings('img').addClass('disn');
            } else {
                $("video").trigger("pause");
                $(this).removeClass('play');
                $(this).addClass('pause');
                $(this).siblings('img').removeClass('disn');
            }
        });

        /**
         * 文字编辑器弹出
         */
        $font_item_ele = null;
        $('.edit_font').live('click',function () {
            var _this = $(this);
            var font_div = _this.parent().parent().find('.font_text');
            var font_html = font_div.html();
            var font_id = font_div.parent().attr('item_id');
            $font_item_ele = $('.posre[item_id="'+font_id+'"]');
            $('.edui-body-container').html(font_html);
            $("#guige").slideDown();
            $("#fade").fadeIn("slow");
            $('body,.layout_content').css("overflow","hidden");
        });

        /**
         * 点击其它区域，或取消时文字编辑器关闭
         */
        function closeEditorDiv() {
            $font_item_ele = null;
            $("#guige").slideUp();
            $("#fade").fadeOut("slow");
            $('body,.layout_content').css("overflow","");
        }

        /**
         * 文字编辑器确定按钮
         */
        function submitFont(font_ele) {
            if($font_item_ele == null) {
                return alert('网页错误未找到元素');
            }
            //跟新内容
            var url = '/article/update-content';
            var item_id = $font_item_ele.attr('item_id');
            var edited_html = $('.edui-body-container').html();
            var sort = 0; // todo unuse sort
            $.post(url,{'id':item_id,'article_id':$article_id,'content':edited_html,'type':'text','sort':sort},function (res) {
                if(res.code != 200) {
                    alert(res.massage);
                } else {
                    $font_item_ele.find('.font_text').html(edited_html)
                    console.log(edited_html);
                    console.log($font_item_ele.find('.font_text').html());
                    closeEditorDiv();
                }
            },'json');
        };
        /**
         * 点击发布
         */
        $('#article_publist').click(function () {
            $('#publishForm').get(0).submit();
        });
    </script>